<template>
	<view class="user-address-list">
		<view class="flex-1">
			<search @input="toSearch" class="search" type="input" :value="searchwords" :padding="0" :radius="50" 
				placeholder="请输入您要搜索的商品名称">
			</search>
		</view>

		<view @tap.stop="goDetail(index,'detail')" class="flex-center mt-sm item-child mt-sm ml-md mr-md pd-sm fill-base radius-16"
			v-for="(item,index) in list" :key="index">
			<image mode="aspectFill"  style="width: 100rpx; height: 100rpx;border-radius: 10rpx;" :src="item.thumbs"></image>
			<view class="flex-1 ml-md">
				<view class="flex-y-baseline mb-md">
					<view class="f-title c-title text-bold max-400 ellipsis">
						{{item.name}}
					</view>
					<view class="flex flex-center pl-sm">
						<!-- <image v-if="item.sex == 0" mode="aspectFill" class="cover radius mr-sm" style="width: 30rpx; height: 30rpx;" src="../static/common/icon_sex_female_1.png"></image>
						<image v-else mode="aspectFill" class="cover radius mr-sm" style="width: 30rpx; height: 30rpx;" src="../static/common/icon_sex_male_1.png"></image> -->
						<image mode="aspectFill" class="cover radius mr-sm" style="width: 60rpx; height: 30rpx;" src="http://qiniu.10-yuan.com/new_new_level_anchor_0.png"></image>
						<text style="color:red;font-weight: 800;">￥{{item.present_price}}</text>
						<image mode="aspectFill" class="cover radius" style="width: 40rpx; height: 40rpx;position: relative;top:30rpx;margin-left: 50rpx;" :src="item.avatar"></image>
					</view>
				</view>
		
				<view class="flex-y-center f-caption c-caption">{{item.signature}}</view>
			</view>
		</view>

		<load-more :noMore="list.current_page>=list.last_page&&list.length>0" :loading="loading" v-if="loading">
		</load-more>
		<abnor :tip="[{ text: '你还没有数据哦~', color: 0 }]" v-if="!loading&&list.length<=0&&list.current_page==1">
		</abnor>

		<view class="space-max-footer"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				check_id: 0,
				param: {
					p: 1,
					key: '',
				},
				list: [],
				loading: false,
				lockTap: false,
				searchwords:''
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
			haveOperItem: state => state.order.haveOperItem,
		}),
		onLoad(options) {
			
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			this.param.key = options.words
			this.searchwords = options.words
			this.getgoodsList()
		},
		onUnload() {
		},
		onPullDownRefresh() {
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.p = this.param.p + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			async initIndex(refresh = false) {
				await this.getList()
			},
			initRefresh() {
				this.param.p = 1
				this.initIndex(true)
			},
			async getList() {
				let {
					list: oldList,
					param
				} = this
				let newList = await this.$api.service.search(param);

				if (this.param.p == 1) {
					this.list = newList
				} else {
					newList = oldList.concat(newList)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			async getgoodsList()
			{
				let {
					list: oldList,
					param
				} = this
				let newList = await this.$api.service.searchgoods(param);
				
				if (this.param.p == 1) {
					this.list = newList
				} else {
					newList = oldList.concat(newList)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			goDetail(index) {
				let {
					id
				} = this.list[index]
				let url = `/user/pages/shop/goods-detail-pay?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			toSearch(val) {
		
				this.param.key = val
				this.getgoodsList()
			},
		}
	}
</script>


<style lang="scss">
	.search {
		height: 60rpx;
		width: 100%;
		padding: 20rpx;
		overflow: hidden;
		background-color: #fff;
		border-radius: 50rpx;
		float: left;
	}
	.user-address-list {
		.address-icon {
			width: 64rpx;
			height: 64rpx;

			.iconfont {
				font-size: 38rpx;
			}
		}

		.address-info {
			max-width: 600rpx;
		}

		.username {
			font-size: 30rpx;
		}

		.oper-info {
			height: 80rpx;
		}
	}
	.list-item {
		float: left;
		box-sizing: border-box;
		width: 45%;
		height: 500rpx;
		margin-bottom: 10rpx;
		
		.log-tag {
			width: 168rpx;
			height: 46rpx;
			background: #fff;
		}
		
		.cover {
			width: 100%;
			height: 300rpx;
		}
		
		.text {
			width: 75rpx;
			height: 75rpx;
		}
		
		.image-bg {
			width: 55rpx;
			height: 55rpx;
			font-weight: 600;
			padding-top: 0rpx;
			text-align: center;
			background-position: center;
			background-size:cover;
			background-repeat: no-repeat;
			background-image: url("/static/common/avoid.png");
		}
	
		.time-long {
			min-width: 72rpx;
			height: 30rpx;
			padding: 0 5rpx;
			background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
			border-radius: 4rpx;
			font-size: 20rpx;
			color: #FFEEB9;
			margin-right: 16rpx;
		}
	
		.f-icontext {
			font-size: 18rpx;
		}
	
		.text-delete {
			font-size: 20rpx;
			color: #B9B9B9;
		}
	
		.item-btn {
			width: 130rpx;
			height: 52rpx;
			border-radius: 8rpx;
		}
	}
</style>
